<template>
  <div id="app">
    <keep-alive>
      <router-view/>
    </keep-alive>
    <!-- 加入缓存之后购物车组件修改之后去其他组件不会消亡 回来还是当前修改的模样-->
    
    <div id="nav-bar">
        <div @click="homeClick" class="nav-bar-item">
          <img src="@/assets/img/navbar/home.svg" alt="">
          <p>首页</p>
        </div>
        <div @click="classifyClick" class="nav-bar-item">
          <img src="@/assets/img/navbar/category.svg" alt="">
          <p>分类</p>
        </div>
        <div @click="shopClick" class="nav-bar-item">
          <img src="@/assets/img/navbar/shopping.svg" alt="">
          <p>购物车</p>
        </div>
        <div @click="profileClick" class="nav-bar-item">
          <img src="@/assets/img/navbar/profile.svg" alt="">
          <p>我的</p>
        </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'App',
  methods:{
    homeClick(){
      this.$router.replace('/home').catch(err=>err);
    },
    classifyClick(){
      this.$router.replace('/classify').catch(err=>err);
    },
    shopClick(){
      this.$router.replace('/shopping').catch(err=>err);
    },
    profileClick(){
      this.$router.replace('/profile').catch(err=>err);
    }
  }
}
</script>

<style>
  @import url("./assets/css/normal.css");

  #nav-bar{
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 49px;
    background: rgb(217, 217, 217);
    /* 弹性盒子布局 1000px / 个数 = 1份/宽度*/
    display: flex;
  }
  .nav-bar-item{
    text-align: center;
    /* flex定义子元素在父元素中占的主轴尺寸 */
    flex: 1;
  }
  .nav-bar-item img{
    width: 24px;
    height: 24px;
    vertical-align: middle;
  }
</style>
